<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Arc 成绩计算</title>
	<link rel="icon" type="image/x-icon" href="static/img/badges/rating_6.png">
	<script type="text/javascript" src="static/lib/jquery/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="static/lib/fomantic-ui/dist/semantic.min.css">
	<script type="text/javascript" src="static/lib/fomantic-ui/dist/semantic.min.js"></script>
	<link rel="stylesheet" type="text/css" href="static/lib/noty/noty.css">
	<link rel="stylesheet" type="text/css" href="static/lib/noty/themes/semanticui.css">
	<link rel="stylesheet" type="text/css" href="static/index.css">
	<script src="js/frame.js"></script>
	<script src="js/base64.js"></script>
	<script src="js/save.js"></script>
	<script type="text/javascript">
		var nowactive='index';
		function settab(a,b){
			let list=document.getElementById('menu').children;
			for(let i=0;i<list.length;++i) list[i].className='item';
			list[a].className='active item';
			document.getElementById(nowactive).className='ui tab';
			document.getElementById(b).className='ui tab active';
			nowactive=b;
		}
	</script>
	<script src="js/upload.js"></script>
	<script src="js/calc.js"></script>
	<style>
		p{display: inline;}
		.ui.styled.accordion .accordion .title,.ui.styled.accordion .title {
		    color: rgba(0,0,0,.87);
		}

		.pst-color{color:#0a82be;}
		.prs-color{color:#648c3c;}
		.ftr-color{color:#50194b;}
		.byd-color{color:#822328;}
		.etr-color{color:#5d4e76;}

		.ui.pst-color.label{
		    background-color:#0a82be;
		    border-color:#0a82be;
		    color:#fff;
		}
		.ui.prs-color.label{
		    background-color:#648c3c;
		    border-color:#648c3c;
		    color:#fff;
		}
		.ui.ftr-color.label{
		    background-color:#50194b;
		    border-color:#50194b;
		    color:#fff;
		}
		.ui.byd-color.label{
		    background-color:#822328;
		    border-color:#822328;
		    color:#fff;
		}
		.ui.etr-color.label{
		    background-color:#5d4e76;
		    border-color:#5d4e76;
		    color:#fff;
		}

		.lost-color{color:#dd4444;}
		.far-color{color:#ffaa11;}
		.pure-color{color:#cc22ee;}
	</style>
</head>
<body>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<div class="ui main container" style="margin-top:2em;margin-left:2em;">
		<div class="ui borderless history menu" style="width:30.8em;" id="menu">
			<a class="active item" onclick="settab(0,'index')">首页</a>
			<a class="item" onclick="settab(1,'songfilter')">曲目查找</a>
			<a class="item" onclick="settab(2,'playupload')">记录管理</a>
			<a class="item" onclick="settab(3,'save')">存档</a>
			<a class="item" onclick="settab(4,'calculator')">计算器</a>
			<a class="item" onclick="settab(5,'other')">其他</a>
		</div>
		<div class="ui tab active" id="index">
			<div class="ui column grid">
				<div class="column">
					<div class="twenty wide column" style="width:95.5em;">
						<h4 class="ui top attached block header">成绩排行</h4>
						<div class="ui bottom attached segment" id="all"></div>
					</div>
				</div>
				<div class="column">
					<div class="wide column" style="display: inline-block;width: 20em;margin-left:91em;">	
						<h4 class="ui top attached block header">信息</h4>
						<div class="ui bottom attached segment"><form class="ui form">
							<div style="margin-top:-0.5em;">
								<p>您当前的潜力值：</p>
								<div class="rating-small rating-badge-0" id="ptt" style="vertical-align: middle;">
								<span><span class="hi" id="ptthi">0.</span><span class="lo" id="pttlo">00</span></span>
								</div>
							</div>
							<div style="margin-bottom: 0.7em;margin-top:-1em;">
								<p style="font-size: 0.75em;" id="pttext">精确值：0.00000</p><br>
								<p style="font-size: 0.75em;" id="b10avg">b10平均：0.00000</p><br>
								<p style="font-size: 0.75em;" id="b30avg">b30平均：0.00000</p>
							</div>
							<p>最近一次录入的游玩：</p><br><br>
							<div id="recent" style="margin-bottom:-1em;margin-top:-0.5em;"></div>
							<div id="recentText" style="margin-bottom:-2em;"></div>
						</form></div>
					</div>
				</div>
			</div>
		</div>
		<div class="ui tab" id="songfilter">
			<div class="ui two column grid">
				<div class="column">
					<div class="wide column" style="width:39em;display: inline-block;">
						<h4 class="ui top attached block header">曲目查找</h4>
						<div class="ui bottom attached segment"><form class="ui form">
							<div class="field"><label>搜索功能（与游戏内类似，可搜曲名或曲师）</label><input type="text" placeholder="Testify" id="songtitlea"></div>
							<div style="padding-bottom:10px;">
								<p>难度：</p>
								<input style="vertical-align:bottom;position:relative;top:-2px;" type="checkbox" name="diff1" value=0> <strong class='pst-color'>PST</strong>
								<input style="vertical-align:bottom;position:relative;top:-2px;" type="checkbox" name="diff1" value=1> <strong class='prs-color'>PRS</strong>
								<input style="vertical-align:bottom;position:relative;top:-2px;" type="checkbox" name="diff1" value=2> <strong class='ftr-color'>FTR</strong>
								<input style="vertical-align:bottom;position:relative;top:-2px;" type="checkbox" name="diff1" value=3> <strong class='byd-color'>BYD</strong>
								<input style="vertical-align:bottom;position:relative;top:-2px;" type="checkbox" name="diff1" value=4> <strong class='etr-color'>ETR</strong>
							</div>
							<div class="two fields">
								<div class="field"><label>定数下限</label><input type="text" placeholder="1.0" id="rankmin"></div>
								<div class="field"><label>定数上限</label><input type="text" placeholder="12.0" id="rankmax"></div><br>
							</div>
							<div class="two fields">
								<div class="field">
									<label>排序方式</label>
									<select id="sortMethod">
										<option value="name">按选定难度的名称排序</option>
										<option value="const">按选定难度的定数排序</option>
										<option value="note">按选定难度的物量排序</option>
										<option value="time">按选定难度的更新时间排序</option>
									</select>
									<div class="ui toggle checkbox" style="margin-top: 0.5em">
										<input type="checkbox" id="sortWay" tabindex="0" class="hidden">
										<label>倒序</label>
									</div>
								</div>
							</div>
							<p>注：选定难度为<strong class='ftr-color'>FTR</strong>，<strong class='prs-color'>PRS</strong>，<strong class='pst-color'>PST</strong>，<strong class='byd-color'>BYD</strong>，<strong class='etr-color'>ETR</strong>顺序中第一个被选定的难度。没有选择难度视同选择全部难度。仅选择<strong class='byd-color'>BYD</strong>和<strong class='etr-color'>ETR</strong>可能产生意料外的排序结果。</p>
						</form></div>
					</div>
				</div>
				<div class="column">
					<div class="wide column" style="width:17em;display: inline-block;">
						<h4 class="ui top attached block header">曲名语言选择</h4>
						<div class="ui bottom attached segment"><form class="ui form">
							<div class="field">
								使用游戏内以下语言的曲名标题：
								<select id="displayLang">
									<option value="en">英文</option>
									<option value="ja">日文</option>
									<option value="zh-Hans">中文</option>
									<option value="ko">韩文</option>
								</select>
							</div>
						</form></div>
					</div>
				</div>
			</div>
			<br>
			<div class="wide column" style="width:78em;display: inline-block;">
				<h4 class="ui top attached block header"><div class="content">查找结果</div></h4>
				<div class="ui bottom attached styled songs accordion"><form class="ui form" id='songcur'>
				</form></div>
			</div>
		</div>
		<div class="ui tab" id="playupload">
			<div class="ui two column grid">
				<div class="column">
					<div class="wide column" style="width:39em;display: inline-block;">
						<h4 class="ui top attached block header">成绩录入</h4>
						<div class="ui bottom attached segment"><form class="ui form">
							<div class="field"><label>曲目名称（请使用前三难度的英文名称）</label><input type="text" placeholder="Aegleseeker" id="songtitle"></div>
							<div style="padding-bottom:10px;">
								<p>难度：</p>
								<input style="vertical-align:bottom;position:relative;top:-2px;" type="radio" name="diff2" value=0> <strong class="pst-color">PST</strong>
								<input style="vertical-align:bottom;position:relative;top:-2px;" type="radio" name="diff2" value=1> <strong class="prs-color">PRS</strong>
								<input style="vertical-align:bottom;position:relative;top:-2px;" type="radio" name="diff2" value=2 checked="checked"> <strong class="ftr-color">FTR</strong>
								<input style="vertical-align:bottom;position:relative;top:-2px;" type="radio" name="diff2" value=3> <strong class="byd-color">BYD</strong>
								<input style="vertical-align:bottom;position:relative;top:-2px;" type="radio" name="diff2" value=4> <strong class="etr-color">ETR</strong>
							</div>
							<div class="three fields">
								<div class="field"><label><strong class="lost-color">LOST</strong><p>个数：</p></label><input type="text" placeholder="0" id="mis"></div>
								<div class="field"><label><strong class="far-color">FAR</strong><p>个数：</p></label><input type="text" placeholder="0" id="far"></div>
								<div class="field"><label><strong class="pure-color">MAXPURE</strong><p>个数：</p></label><input type="text" placeholder="1568" id="mxp"></div><br>
							</div>
							<div class="one fields" style="margin-top: -0.5em;">
								<div class="field"><label><p>或者，仅录入分数：（若有填写此项即按仅分数录入）</p></label><input type="text" placeholder="10001568" id="scoreOnly"></div><br>
							</div>
							<div class="ui blue submit button" onclick="uploadplay()">添加记录</div>
						</form></div>
					</div>
				</div>
				<div class="column">
					<div class="wide column" style="width:39em;display: inline-block;">
						<h4 class="ui top attached block header">成绩删除</h4>
						<div class="ui bottom attached segment"><form class="ui form">
							<strong style="color: red;">如此操作会删除此谱面下的记录，且无法恢复！</strong>
							<div class="field"><label>曲目名称（请使用前三难度的英文名称）</label><input type="text" placeholder="Aegleseeker" id="songtitlec"></div>
							<div style="padding-bottom:10px;">
								<p>难度：</p>
								<input type="radio" name="diffc" value=0><strong class="pst-color">PST</strong>
								<input type="radio" name="diffc" value=1><strong class="prs-color">PRS</strong>
								<input type="radio" name="diffc" value=2 checked="checked"><strong class="ftr-color">FTR</strong>
								<input type="radio" name="diffc" value=3><strong class="byd-color">BYD</strong>
								<input type="radio" name="diffc" value=4><strong class="etr-color">ETR</strong>
							</div>
							<div class="ui red submit button" onclick="delplay()">删除记录</div>
						</form></div>
					</div>
				</div>
			</div>
		</div>
		<div class="ui tab" id="save">
			<div class="ui column grid" style="width: 100em;">
				<div class="column" style="width:40em;">
					<div class="wide column" style="width:39em;display: inline-block;">
						<h4 class="ui top attached block header">导出当前存档</h4>
						<div class="ui bottom attached segment"><form class="ui form">
							<p>将导出的字符串在其他地方导入即可转移存档。</p>
							<textarea rows="10" id="rawoutput" style="margin-bottom: 1em;margin-top: 1em;"></textarea>
							<div class="ui blue submit button" onclick="outersave()">导出</div>
						</form></div>
					</div>
				</div>
				<div class="column" style="width:40em;">
					<div class="wide column" style="width:39em;display: inline-block;">
						<h4 class="ui top attached block header">导入至当前存档</h4>
						<div class="ui bottom attached segment"><form class="ui form">
							<strong style="color: red;">导入将覆盖你的当前存档！建议导入前先导出当前存档！</strong>
							<textarea rows="10" id="rawinput" style="margin-bottom: 1em;margin-top: 1em;"></textarea>
							<div class="ui red submit button" onclick="outerload()">导入</div><br>
						</form></div>
					</div>
				</div>
				<div class="column">
					<div class="wide column" style="width: 11.3em;display: inline-block;margin-top: 0em;">
						<h4 class="ui top attached block header">清空当前存档</h4>
						<div class="ui bottom attached segment"><form class="ui form" style="margin-bottom: 0em;">
							<div class="ui red submit button" onclick="clearsave()">清空当前存档</div>
						</form></div>
					</div>
				</div>
			</div>
		</div>
		<div class="ui tab" id="calculator">
			<div class="ui two column grid">
				<div class="wide column" style="width:42em;display: inline-block;">
					<h4 class="ui top attached block header">计算器 A</h4>
					<div class="ui bottom attached segment"><form class="ui form">
						<div class="two fields">
							<div class="field"><label>物量</label><input type="text" placeholder="2221" id="calcNote"></div>
							<div class="field"><label>分数</label><input type="text" placeholder="9999900" id="calcScoreA"></div><br>
						</div>
						<div class="two fields">
							<div class="field"><label>折合 <strong class="far-color">FAR</strong> 数量</label><input type="text" placeholder="1" id="calcFar"></div>
							<div class="field"><label><strong class="pure-color">MAXPURE</strong> 数量</label><input type="text" placeholder="2152" id="calcMax"></div><br>
						</div>
						<div class="ui blue submit button" onclick="calcA()">计算</div><br><br>
						<p>
							计算器 A 说明：<br>
							折合 <strong class="far-color">FAR</strong> 数量指 <strong class="lost-color">LOST</strong> 的数量的两倍加上 <strong class="far-color">FAR</strong> 的数量。<br>
							填入物量与分数时将尝试计算折合 <strong class="far-color">FAR</strong> 数量与 <strong class="pure-color">MAXPURE</strong> 数量；填入物量与后两者时将尝试计算分数。<br>
							填入正常范围以外的数值可能会导致出错。
						</p>
					</form></div>
				</div>
				<div class="wide column" style="width:40em;display: inline-block;">
					<h4 class="ui top attached block header">计算器 B</h4>
					<div class="ui bottom attached segment"><form class="ui form">
						<div class="three fields">
							<div class="field"><label>定数</label><input type="text" placeholder="12.0" id="calcConst"></div>
							<div class="field"><label>分数</label><input type="text" placeholder="9999900" id="calcScoreB"></div><br>
							<div class="field"><label>单曲 ptt</label><input type="text" placeholder="13.9995" id="calcResult"></div><br>
						</div>
						<div class="ui blue submit button" onclick="calcB()">计算</div><br><br>
						<p>
							计算器 B 说明：<br>
							填入以上三者中的两者时将尝试计算第三者。<br>
							计算定数时会四舍五入到最近的 0.1 的倍数。<br>
							填入正常范围以外的数值可能会导致出错。
						</p>
					</form></div>
				</div>
			</div>
		</div>
		<div class="ui tab" id="other">
			<div class="ui two column grid">
				<div class="wide column" style="width:42em;display: inline-block;">
					<h4 class="ui top attached block header">图例</h4>
					<div class="ui bottom attached segment"><form class="ui form" style="margin-bottom: 0em;">
						<div id="example" style="margin-bottom:-1em;"></div>
						第一行：左侧为曲名，过长时会省略后面的部分；右侧为难度和标级。<br>
						第二行：左侧为分数；中间为谱面定数；右侧为游玩 ptt。<br>
						第三行：左侧为评级；中间上方为 <strong class="pure-color">PURE</strong> 个数和 <strong class="pure-color">MAXPURE</strong> 个数；中间下方为 <strong class="far-color">FAR</strong> 个数和 <strong class="lost-color">LOST</strong> 个数；右侧为其游玩 ptt 的排名，或表示这指最近游玩。
					</form></div>
				</div>
				<div class="wide column" style="width:40em;display: inline-block;">
					<h4 class="ui top attached block header">关于</h4>
					<div class="ui bottom attached segment"><form class="ui form" style="margin-bottom: 0em;">
						<p>所有录入数据存储于本地（浏览器的localStorage）。</p><br>
						<p>所有曲目和谱面数据来自<a href="https://arcwiki.mcd.blue/">Arcaea中文维基</a>。</p><br>
						<p>此处潜力值的计算方式为(b30+b10)/40，为不推分时能达到的最高值。</p><br>
						<p>受浮点数误差影响，算出的总ptt可能会有0.00001的误差。</p><br>
						<p>Written by WYXkk</p><br>
						<p>Semantic UI 永远滴神</p><br>
						<p>您可能需要调整页面大小以看到完整页面。</p>
					</form></div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var slst,sdb;
		async function init(){
			await fetch('./static/slst.json').then(response=>response.json()).then(data=>{slst=data;});
			slst.songs.find((x)=>{return x.id=="quon"}).title_localized.en="Quon (Feryquitous)";
			slst.songs.find((x)=>{return x.id=="quonwacca"}).title_localized.en="Quon (DJ Noriken)";
			slst.songs.find((x)=>{return x.id=="genesis"}).title_localized.en="Genesis (Iris)";
			slst.songs.find((x)=>{return x.id=="genesischunithm"}).title_localized.en="Genesis (Morrigan)";
			for(let i in slst.songs){
				let info=slst.songs[i];
				if(info.difficulties[3]!=undefined&&info.difficulties[3].ratingClass==4)
				{
					info.difficulties=[
						...info.difficulties.slice(0,3),
						{ratingClass:0,rating:0},
						info.difficulties[3]
					];
				}
			}
			await fetch('./static/sdb.json').then(response=>response.json()).then(data=>{sdb=data;});
			load();
		}
		init();
	</script>
	<script type="text/javascript">
		document.getElementById("songtitlea").addEventListener("input",filter);
		document.getElementById("rankmin").addEventListener("input",filter);
		document.getElementById("rankmax").addEventListener("input",filter);
		document.getElementById("sortMethod").addEventListener("change",filter);
		document.getElementById("sortWay").addEventListener("change",filter);
		{
			let x=document.getElementsByName("diff1");
			for(let d=0;d<=4;d++) x[d].addEventListener("input",filter);
		}
		document.getElementById("displayLang").addEventListener("change",()=>{
			let lang=document.getElementById("displayLang").value;
			setNewLang(lang);
		});
		$('#sortMethod').dropdown();
		$('#displayLang').dropdown();
		$('.ui.checkbox:not(.settings)').checkbox();
	</script>
</body>
</html>